<template>
	<DIV id="home">
		<nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
		<Scroll ref="scroll" :probeType="3" @scroll="getscrollposition" :pullupLoad="true" @pullingUp="loadmore">
			<HomeSwiper :banners="banners"></HomeSwiper>
			<HomeRecommend :recommend="recommends"></HomeRecommend>
			<TabContorl :tabtexts="tabtexts" @tabclick="tabclick"></TabContorl>
			<Piclist :imglist="pics"></Piclist>
		</Scroll>
		<BackToTop @click.native="Backtop" v-show="IsbackShow"></BackToTop>
	</DIV>
</template>

<script>
	import NavBar from "../../components/common/navbar/NavBar.vue"
	import TabContorl from "../../components/content/TabControl/TabControl.vue"
	import Piclist from "../../components/common/piclist/Piclist.vue"
	import Scroll from "../../components/common/scroll/Scroll.vue"
	import BackToTop from "../../components/content/BackToTop.vue"
	
	import HomeSwiper from "./HomeSwiper.vue"
	import HomeRecommend from "./HomeRecommend.vue"
	
	import {getHomeMultidata,getHomeRecommend} from "../../network/home.js"

	
	export default{
		name:"home",
		components:{
			NavBar,
			HomeSwiper,
			HomeRecommend,
			TabContorl,
			Piclist,
			Scroll,
			BackToTop
		},
		data(){
			return {
				banners:[],
				recommends:[],
				tabtexts:[{type:"star",text:"明星"},{type:"comic",text:"动漫"},{type:"pet",text:"宠物"}],
				pics:[],
				currentType:"star",
				position: 0
			}
		},
		computed:{
			IsbackShow(){
				return -this.position > 500
			}
		},
		mounted(){
			getHomeMultidata().then(res => {
				this.banners = res.data.banner.list
				this.recommends = res.data.recommend.list
			})
			this.getrecommendData("star",1)	  
			},
		methods:{
			tabclick(type){
				this.currentType = type
				this.getrecommendData(type,1)
			},
			getrecommendData(type,page){
				getHomeRecommend(type,page).then(res => {
					this.pics= res.data
				})
			},
			getscrollposition(position){
				this.position = position.y
			},
			loadmore(){
				console.log("上拉加载更多")
				this.getrecommendData(this.currentType,2)	 
				this.$refs.scroll.scroll.finishPullUp()
			},
			Backtop(){
				this.$refs.scroll.scroll.scrollTo(0,0,500)
			}
  }}
</script>

<style>	
	.home-nav{
		background-color: var(--color-tint);
		color:#fff;
	}
</style>
